<template>
    <div class="StateSet_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack()" >
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>状态设置</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" @click="refresh()"/>
                </div>
            </TitleMenu>
        </div>
        <div id="StateSet_content" v-scroll="onScroll">

            <a-row class="StateSet_row" id="StateSet_first_row">
                <a-col :span="8" class="StateSet_col_left">
                    工作模式
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <select name="state" v-model="workModeSelected"  @change="getWorkModeSelected($event)" class="selectClass" >
                        <option :value="workMode.id" :label="workMode.name" v-for="workMode in workModeList" class="aa">{{workMode.name}}</option>
                    </select>
                </a-col>
            </a-row>
            <!--<a-row class="StateSet_row" id="StateSet_second_row">
                <a-col :span="8" class="StateSet_col_left">
                    任务号
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <input type="text" v-bind:onblur="handleOnInputs()" placeholder=" 输入后自动保存" class="StateSet_input" v-model.trim="planNo" ref="planNo"></input>
                </a-col>
            </a-row>-->

            <a-row id="StateSet_btn_row">
                <a-col :span="24" class="StateSet_btn_col">
                    <el-button type="info"  id="StateSet_btn" class="my_big_long_btn" @click="workModeSet()" clickMusic="true">
                        确定
                    </el-button>
                </a-col>

            </a-row>

            <!--<a-row class="StateSet_row">
                <a-col :span="8" class="StateSet_col_left">
                    图片模式
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <a-select defaultValue="1"  >
                        <a-select-option value="1">防洪灾情</a-select-option>
                        <a-select-option value="2">安全隐患</a-select-option>
                        <a-select-option value="3" >巡山危石</a-select-option>
                        <a-select-option value="4">路桥作业</a-select-option>
                        <a-select-option value="5">线路作业</a-select-option>
                        <a-select-option value="6">地形地貌</a-select-option>
                        <a-select-option value="7">跟班作业</a-select-option>
                        <a-select-option value="8">添乘巡视</a-select-option>
                    </a-select>
                </a-col>
            </a-row>

            <a-row class="StateSet_row">
                <a-col :span="8" class="StateSet_col_left">
                    语音模式
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <a-select defaultValue="2"  >
                        <a-select-option value="1">防洪灾情</a-select-option>
                        <a-select-option value="2">安全隐患</a-select-option>
                        <a-select-option value="3" >巡山危石</a-select-option>
                        <a-select-option value="4">路桥作业</a-select-option>
                        <a-select-option value="5">线路作业</a-select-option>
                        <a-select-option value="6">地形地貌</a-select-option>
                        <a-select-option value="7">跟班作业</a-select-option>
                        <a-select-option value="8">添乘巡视</a-select-option>
                    </a-select>
                </a-col>
            </a-row>

            <a-row class="StateSet_row">
                <a-col :span="8" class="StateSet_col_left">
                    视频模式
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <a-select defaultValue="3"  >
                        <a-select-option value="1">防洪灾情</a-select-option>
                        <a-select-option value="2">安全隐患</a-select-option>
                        <a-select-option value="3" >巡山危石</a-select-option>
                        <a-select-option value="4">路桥作业</a-select-option>
                        <a-select-option value="5">线路作业</a-select-option>
                        <a-select-option value="6">地形地貌</a-select-option>
                        <a-select-option value="7">跟班作业</a-select-option>
                        <a-select-option value="8">添乘巡视</a-select-option>
                    </a-select>
                </a-col>
            </a-row>-->
           <!-- <a-row class="StateSet_row">
                <a-col :span="8" class="StateSet_col_left">
                    任务编号
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <a-input id="taskNumber" />
                </a-col>
            </a-row>

            <a-row class="StateSet_row">
                <a-col :span="8" class="StateSet_col_left">
                    当前用户
                </a-col>
                <a-col :span="16" class="StateSet_col_right">
                    <a-input id="now_user" />
                </a-col>
            </a-row>-->
        </div>
        <FooterChaanel v-if="isShowFooter===true"></FooterChaanel>
    </div>
</template>
<style>
    .StateSet_input{
        height: 12vw;
        width: 60vw;
        font-size: 5.5vw;
        border: 0.3vw solid rgb(169, 169, 169);
        border-radius: 0.5vw;
        outline:none;
        background: rgb(211, 211, 211);
    }
    .selectClass {
        width: 60vw;
        height: 12vw;
        background: lightgray;
        font-size: 5vw;
        border-radius: 1.5vw;
        outline: none;
    }
    #StateSet_btn{
        margin:20vw 0 0 0;
    }
    #StateSet_first_row{
        margin-top: 1vw;
    }
    #StateSet_content{
        height: 107vw ;
        width: 100vw;
        background: rgb(237,237,237);
        overflow: scroll;
    }
    .StateSet_row{
        width: 100vw;
        height: 14vw;
        background: #FFFFFF;
        margin: 3vw 0 3vw 0;
    }
    .StateSet_col_left{
        height: 14vw;
        line-height: 14vw;
        font-size: 6vw;
        font-family: "Microsoft YaHei";
        text-align: center;
        color: black;
    }
    .StateSet_col_right{
        height: 14vw;
        line-height: 14vw;
        padding: 0.6vw 0 0 0;
    }
    #StateSet_btn_row{
        width: 100vw;
        height: 14vw;
        line-height: 14vw;
        margin: 4vw 0 3vw 0;
    }
    /*#StateSet_btn{
        width: 94.21vw;
        height: 14.687vw;
        line-height: 12vw;
        border-radius: 2vw;
        background-image: linear-gradient(-180deg, #8F8F8F 0%, #5D5D5D 100%);
    }*/
    #taskNumber{
        width: 60vw;
        height: 12vw;
        padding: 0 0 0 2vw
    }
    #now_user{
        width: 60vw;
        height: 12vw;
        padding: 0 0 0 2vw
    }

    .StateSet_col_right .ant-select{
        width: 60vw;
        height: 12vw;
        line-height: 12vw;
    }
    .ant-select-selection__rendered{
        line-height: 12vw;
        height: 12vw;
        font-size: 5vw;
        padding-left: 2vw;
        margin: 0;
        background: lightgray;

    }

    .StateSet_col_right .ant-select .ant-select-selection--single{
        height: 13vw;
        border-radius: 0;
    }
    .ant-select-arrow{
        font-size: 6vw;
        line-height: 12vw;
        height: 12vw;
        width: 8vw;

    }
    .ant-select-dropdown-menu {
        width: 60vw;
        max-height: none;

    }
    .ant-select-dropdown-menu-item{
        width: 60vw;
        height: 12vw;
        line-height: 12vw;
    }
    #taskNumber {
        font-size: 5vw;
        font-family: PingFangSC-Semibold;
        background-color: lightgray;
        border-radius: 2vw;
    }
    #now_user{
        font-size: 5vw;
        font-family: PingFangSC-Semibold;
        background-color: lightgray;
        border-radius: 2vw;
    }
    .StateSet_btn_col{
        text-align: center;
    }

</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    export default {
        name: "GroupAdd",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        mounted(){
            this.getWorkMode();
            window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
            window.addEventListener('native.keyboardhide', this.keyboardHideHandler);
        },
        data() {
            return {
                msg: 'hello vue',
                workModeSelected:'',
                workModeList:[],
                workModeId:'0',
                workModeName : '',
                isShowFooter:true,
            }
        },methods: {
            onScroll(){
                this.handleScroll;
            },
            getWorkMode(){
                let me = this;
                console.log("初始化工作模式...");
                this.$api.getWorkMode().then((resp)=>{
                    //状态码200
                    if(resp.status === 200){
                        let result = resp.data.result;
                        me.workModeList= result.data;
                        let workOutId = localStorage.getItem('workModeId');//上次退出保存在内存中的模式，这里是登陆当前进来的模式
                        me.workModeSelected = workOutId;
                        console.log("工作模式初始化完成...");
                    }
                }).catch((error)=>{
                    //请求失败
                    console.log("init workMode failed:"+error);

                })
            },
            getWorkModeSelected($event){
                /* let workModeId = this.currWorkMode.id;
                 let workModeName = this.currWorkMode.name;
                 console.log(workModeId+workModeName);*/
            },
            workModeSet(){
                let workModeId = this.workModeSelected;
                this.$api.workModeSet(workModeId).then((resp)=>{
                    if(resp.data.status ===200){
                        let data = resp.data.result.data;
                        this.$store.commit('changeWorkModeId',workModeId);
                        this.$store.commit('changeWorkModeName',data.name);
                        console.log("设置当前工作模式:"+workModeId+"成功/stateSet");
                        this.toast_setWorkModeOk();
                    }else {
                        console.log("返回其他状态码,设置模式失败/stateSet");
                    }

                }).catch((error)=>{
                    console.log(error);
                });
            },
            toast_setWorkModeOk(){
                if(typeof (window.plugins)!=="undefined"){
                    window.plugins.toast.showWithOptions(
                        {
                            message: "设置成功",
                            duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
                            position: "bottom",
                            addPixelsY: -120  // added a negative value to move it up a bit (default 0)
                        }
                    );
                }else{
                    console.log("设置成功");
                }
            },
            jumpBack(){
                this.clickButton();
                this.$router.push('/homeWork');
            },
            refresh(){
              this.clickButton();
            },
        }
    }
</script>

